import { CodeCollapse } from '../CodeCollapse.js'

const templateCode = `<div>
    <VForm ref="VForm" :options="formOptions" />
    <el-button @click="handleConfirm" type="primary">确定</el-button>
  </div>`

export const BasicUsage = {
  template: `
    <el-card header="使用方法" ref="container">
      ${templateCode}
      <CodeCollapse :codes="[templateCode, scriptCode]" />
    </el-card>
  `,

  components: {
    CodeCollapse
  },

  data() {
    return {
      formOptions: {
        items: [
          {
            label: '姓名',
            prop: 'name',
            component: 'input',
            required: true,
            width: 150
          },
          {
            label: '手机号码',
            prop: 'mobile',
            component: 'input',
            options: { type: 'number' },
            rule: [
              { required: true, message: '请输入手机号码' },
              { pattern: /^1\d{10}$/, message: '请输入正确的手机号码' }
            ],
            width: 200
          },
          {
            label: '身份',
            prop: 'type',
            dicts: [
              { label: '管理员', value: 0 },
              { label: '普通用户', value: 1 },
              { label: '其他', value: 99 },
            ],
            component: 'radio',
            defaultValue: 0
          },
          {
            label: '描述',
            prop: 'remark',
            component: 'textarea',
            required: true,
            show: params => params.type === 99,
            width: 350,
            suffix(h) {
              return h('span', { style: 'color: red;display: block'}, '*选择其他时，请输入描述')
            }
          }
        ]
      }
    }
  },

  computed: {
    templateCode() {
      return `<template>
  ${templateCode}
</template>`
    },
    scriptCode() {
      const { data } = BasicUsage
      return `<script>
export default {
  ${data.toString()},
  methods: {
    async handleConfirm() {
      const params = await this.$refs.VForm.validate()
      console.log(params, 'params');
      alert('提交')
    }
  }
}
</script>`
    }
  },

  methods: {
    async handleConfirm() {
      const params = await this.$refs.VForm.validate()
      console.log(params, 'params');
      alert('提交')
    }
  }
}